
<template>
  <div>
    <customTable :columns="columns" :data="datalist" />
  </div>
</template>
<script>
import customTable from "./common/customTable";
export default {
  components: {
    customTable,
  },
  data() {
      let self=this;
      function handleInput(val,row){
        self.handleInput(val,row)
      }
    return {
      datalist:[
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            email: '2222',
            id:"00000001"
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            email: 'xxxx',
            id:"00000002"
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            email: 'dddd',
            id:"333333"
          }
        ],
      columns: [
        { prop: "date", label: "日期", align: "center" },
        { prop: "name", label: "姓名", align: "center" },
        { prop: "address", label: "地址", align: "center" },
        {
          prop: "email",
          label: "邮箱",
          align: "center",
          render(h, { row }) {
            return (
              <div>
                <el-input
                  value={row.email}
                  onInput={(val)=>{
                     handleInput(val,row)
                  }}
                  placeholder="请输入内容"
                ></el-input>
              </div>
            );
          },
        }
      ],
    };
  },
  methods:{
      handleInput(val,row){
        let rowitem=this.datalist.find((item)=>item.id==row.id);
        console.log("rowitem",rowitem)
        rowitem.email=val;
        //this.$set(rowitem,'email',val);
      
      }
  }
};
</script>